<template>
  <div class="content">
    <div class="box">
      <!-- <el-input placeholder="请选择工种" /> -->
      <el-input v-model="form.account" placeholder="请输入账号" />
      <el-input v-model="form.password" type="password" placeholder="请输入密码" />
      <el-button type="primary" @click="loginTap">登录</el-button>
      <el-button type="warning" @click="backTap">返回</el-button>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs } from 'vue'

const emit = defineEmits(['login', 'back'])
const state = reactive({
  form: {
    account: '',
    password: ''
  }
})
const { form } = toRefs(state)
/** 登录 */
const loginTap = () => {
  emit('login', form.value)
}

/** 返回 */
const backTap = () => {
  emit('back')
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 50%;
    height: 60%;
    padding: 50px 100px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px); /* Gaussian blur */
    -webkit-backdrop-filter: blur(10px); /* Gaussian blur for Safari */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .el-input,
    .el-button {
      margin: 0;
      padding: 0;
      height: 45px;
      font-size: 18px;
    }
  }
}
</style>
